package myJs

import myJs.Implicits._
import myJs.Utils.g
import myJs.myPkg.jquery._
import myJs.myPkg.{ColumnOptions, TableOptions, myHighcharts}
import org.scalajs.dom.ext.Ajax
import scalatags.Text.all._
import shared.highcharts.config._

import scala.collection.immutable.SeqMap
import scala.concurrent.ExecutionContext.Implicits.global
import scala.scalajs.js
import scala.scalajs.js.JSConverters._
import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}


/**
 * Created by yz on 13/11/2020
 */
@JSExportTopLevel("DetailInfo")
object DetailInfo {

  val tableMap = Browse.map ++ SeqMap("cds" -> "Cds", "pep" -> "Pep", "seq" -> "Gene")

  @JSExport("init")
  def init = {
    refreshTable
    boxPlot
  }

  def getGeneId = {
    g.geneId.toString
  }

  def refreshTable = {
    val url = g.jsRoutes.controllers.GenomeBrowseController.getDetailInfo().url.toString
    Ajax.get(url = s"${url}?geneId=${getGeneId}").map { xhr =>
      val data = xhr.responseText.toJDJAn.toMyJDS
      val html = tableMap.map { case (fieldName, header) =>
        val v = data(fieldName)
        val geneId = data("geneId")
        val trueV = fieldName match {
          case "cds" | "pep" | "seq" => span(s">${geneId}", br,
            v
          )
          case _ => span(v)
        }
        tr(
          th(header),
          td(trueV)
        )
      }.mkString("&nbsp;")
      $("#table tbody").html(html)
    }
  }

  def boxPlot = {
    $("#charts").html("<img src='/assets/images/loading.gif'/>")
    val url = g.jsRoutes.controllers.GenomeBrowseController.boxPlotByGeneId().url.toString
    Ajax.get(url = s"${url}?geneId=${getGeneId}").map { xhr =>
      val data = xhr.responseText.toJDJAn
      val chartConfig = HighchartsConfig(
        chart = Chart(
          `type` = "boxplot",
          height = 550,
          marginTop = 40,
          marginBottom = 90
        ),
        title = Title(text = s"${getGeneId}"),
        series = List(
          Boxplot(
            name = getGeneId,
            data = data("ev").toList2D
          ),
          Scatter(
            name = "Outlier",
            color = myHighcharts.getOptions().toJDJAn("colors").toJArS(0),
            marker = Marker(
              fillColor = "white",
              lineWidth = 1,
              lineColor = myHighcharts.getOptions().toJDJAn("colors").toJArS(0)
            ),
            tooltip = Tooltip(
              pointFormat = s"FPKM: {point.y}"
            )
          )
        ),
        credits = Credits(enabled = false),
        legend = Legend(
          enabled = false
        ),
        xAxis = XAxis(
          labels = Labels(
            style = Style(
              fontSize = "12px",
              fontFamily = "Arial, sans-serif"
            )
          ),
          categories = data("tissue").toJArS.toList,
          title = Title(
            text = "Groups"
          )
        ),
        yAxis = YAxis(
          title = YAxisTitle(
            text = "Expression (FPKM)"
          ),
          min = 0
        ),
        labels = Labels(
          style = Style(
            fontSize = "16px",
            color = "black",
            fontWeight = "normal",
          )
        ),
        plotOptions = PlotOptions(
          boxplot = BoxplotOption(
            fillColor = "#F0F0E0",
            lineWidth = 2,
            medianColor = "#0C5DA5",
            medianWidth = 3,
            stemColor = "#A63400",
            stemDashStyle = "dot",
            stemWidth = 1,
            whiskerColor = "#3D9200",
            whiskerLength = "20%",
            whiskerWidth = 3
          )
        )
      )
      myHighcharts.chart($("#charts"), chartConfig)
    }
  }


}
